<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的分享</title>

    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>

    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>

    <style>
    .share_container{
        height: 24.5rem;
        margin: 0 auto;
        width:90%;
        background: url(../../image/share_bg.png);
        background-repeat:no-repeat;
        background-size: contain;

    }
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .imgBox{
      width: 90%;
      height:100%;
      margin: 0.7rem auto;
      background: url(../../image/share_2.png);
      background-repeat:no-repeat;
      background-size: contain;
      /*overflow:hidden;*/
    }
    </style>
</head>
<body style="height:100%">
  <div id="blank" class="header">
      <div v-back.tapmode class="back"></div>
      <span class="title">我的分享</span>
  </div>
  <div id="app" class="top-container" v-cloak style="height:100%">
    <div class="top-container imgBox">
      <div class="" style="width:10rem; height: 11rem; background: rgba(0, 0, 0,0.2);border-radius:7px;margin: 3.5rem auto 0.5rem; overflow:hidden;">
        <div class="" style="width:8.5rem; height: 8.5rem; background-color: #fff; border-radius:7px;margin: 0.7rem auto ; overflow:hidden ">
          <img :src="qrcode" style="width: 100%;">
        </div>
        <span style="width:auto; color:#ffffff; font-size:16px; margin-left:20%">邀请码:{{user.invite_code}}</span>
      </div>
      <div class="user" style="text-align: center; height: 7%" >
        <img :src="user.portrait" alt="" class="userPhoto" style="height:60%;border-radius: 7px;overflow: hidden;">
        <span class="userName" style="vertical-align:20%; color: #fff;">{{user.nickname}}</span>
      </div>
    </div>d
    <div class="aui-sharebox aui-grid" style="transform: translate3d(0px, 0px, 0px); opacity: 1;">
      <div class="aui-row aui-row-padded">
          <div class="aui-col-5 aui-sharebox-btn" v-myclick="['session',share_wx]"><img v-src="'../../image/4_weixing_1.png'">
              <div class="aui-grid-label">分享到微信</div>
          </div>
          <!-- <div class="aui-col-5 aui-sharebox-btn" v-myclick="['session',save]"><img v-src="'../../image/4_phone_1.png'">
              <div class="aui-grid-label">保存到相册</div>
          </div> -->
      </div>
  </div>

  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>


<script>

var user;
var vm;
var qrcode;
var wx;
var makeSharePic;
apiready = function () {
    setBSImg();
    scanner = api.require('FNScanner');
    wx = api.require('wx');
    qq = api.require('QQPlus');

    new Vue({
        el: '#blank'
    });
    if (getPrefs('token')) {
        showProgress();
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            user = ret.content;
            qrcode = user.share.url;
            console.log(qrcode);
            setPrefs('user', user);
            encodeImg(qrcode);
            // initApp();

        };
        pinet.post(URL.getUserinfo, data, callback);
    } else {
        user = {};
        qrcode = {};
        initApp();
        api.parseTapmode();
    }
    addListeners();
};

function _fixType(type) {
	type = type.toLowerCase().replace(/jpg/i, 'jpeg');
	var  r = type.match(/png|jpeg|bmp|gif/)[0];
	return 'image/' + r;
};

function initApp(qrcode) {
    vm = new Vue({
        el: '#app',
        data: {
            imgPath:'../../image/',
            qrcode: qrcode,
            user:user,
            appInstalled: {
                wx: true,
                qq: true,
            },
            BSImg: {
                big: Vue.BSImg == 'big',
                small: Vue.BSImg == 'small'
            },
        },
        computed:{
        },
        methods:{
          share_wx: function (scene) {
             var that = this;
              if(!that.appInstalled.wx){
                api.alert({
                    title: '提示',
                    msg: '未能检测到本地微信',
                    buttons: ['确定']
                }, function (ret, err) {});
              }else{
                share_wx(scene, vm.user.share);
              }
          },
          save:function () {
            var w = $('#app').outerWidth();
            var h = $('#app').outerHeight();
            html2canvas($("#app"), {
              allowTaint: true,
              taintTest: false,
              width: w,
              height: h,
              // window.devicePixelRatio是设备像素比
              dpi: window.devicePixelRatio,
                onrendered: function(canvas) {
                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                var imgData  = canvas.toDataURL('png');
                imgData = imgData.replace(/^data:image\/\w+;base64,/, "");
                var trans = api.require('trans');
                trans.saveImage({
                    base64Str: imgData,
                    album:true,
                    imgPath:"fs://",
                    imgName:"share.png"
                }, function(ret, err) {
                  console.log(JSON.stringify(ret));
                  console.log(JSON.stringify(err));

                  if (ret && ret.status) {
                      api.toast({
                          msg: '已保存到相册',
                          duration: 2000,
                          location: 'middle'
                      });
                  } else {
                    api.toast({
                        msg: '保存失败',
                        duration: 2000,
                        location: 'middle'
                    });
                  }
                    // if (ret.status) {
                    //   api.saveMediaToAlbum({
                    //       path: 'fs://image/share.png'
                    //   }, function(ret, err) {
                    //     console.log(JSON.stringify(ret))
                    //       if (ret && ret.status) {
                    //           api.toast({
                    //               msg: '已保存到相册',
                    //               duration: 2000,
                    //               location: 'middle'
                    //           });
                    //       } else {
                    //         api.toast({
                    //             msg: '保存失败',
                    //             duration: 2000,
                    //             location: 'middle'
                    //         });
                    //       }
                    //   });
                    // } else {
                    //     alert(JSON.stringify(err));
                    // }
                });
            }
            //可以带上宽高截取你所需要的部分内容
        });

          }

        },
        created: function () {
            var that = this;
            wx.isInstalled(function (ret) {
                that.appInstalled.wx = ret.installed;
            });
            qq.installed(function (ret) {
                that.appInstalled.qq = ret.status;
            });
        }
    });
}

function encodeImg(qrcode) {
    scanner.encodeImg({
        content: qrcode,
        saveImg: {
            path: 'fs://qrcode_share.png',
            w:400,
            h:400
        }
    }, function (ret) {
        qrcode = {};
        if(ret.status){
           qrcode = ret.imgPath;
        }
        initApp(qrcode);
        listenUpdUser(vm.user);
        api.parseTapmode();
    })
}

function addListeners() {
    api.addEventListener({
        name: 'viewappear'
    }, function () {
        onPageStart();
    });

    api.addEventListener({
        name: 'viewdisappear'
    }, function () {
        onPageEnd();
    });

    api.addEventListener({
        name: 'keyback'
    }, function () {
        onPageEnd();
        api.closeWin();
    });
}

</script>
</html>
